<template>
  <div class="container">
    <!-- 命名视图 -->
    <!-- <div class="box">
      <header class="header">header</header>
      <div class="content">content</div>
    </div> -->
    <router-view />
    <footer v-if="!$route.meta.hidden" class="footer">footer</footer>
  </div>
</template>

<style lang="stylus">
*
  padding 0
  margin 0
  text-decoration none
  list-style none

html
  // font-size 100px
  // font-size 26.666666666vw // 以iphone6为设计基础 // 100 / 375 *100
  font-size 31.25vw // 以iphone5为基础 // 100/320*100
body
  font-size 12px

// 媒体查询 @media
// @media all and (max-width 300px)
//   body
//     background-color #123456
// @media all and (min-width 300px) and (max-width 640px)
//   body
//     background-color #654321

@media all and (orientation landscape)
  html
    font-size 100px

html, body, .container
  width 100%
  height 100%
.container
  max-width 750px
  margin 0 auto
  box-shadow 0 0 30px #000
  display flex
  flex-direction column
  .box
    flex 1
    display flex
    flex-direction column
    overflow auto
    .header
      width 100%
      height 0.44rem
      background-color #f66
    .content
      flex 1
      overflow auto
  .footer
    width 100%
    height 0.5rem
    background-color #ccc
</style>
